<template>
  <div class="na">
    <div class="common_nav">
      <link rel="stylesheet" href="https://static.ws.126.net/163/f2e/commonnav2019/css/commonnav_headcss-89aa49bc1b.css">
      <div class="ntes_nav_wrap" >
        <div class="ntes-nav" >
          <div class="ntes-nav-main clearfix">
            <div class="c-fl" >
              <a class="ntes-nav-index-title ntes-nav-entry-wide c-fl" href="/" title="网易首页">网易首页</a>
              <!-- 应用 -->
              <div class=" ntes-nav-select ntes-nav-select-wide ntes-nav-app  c-fl">
                <a href="" class=" ">应用
                </a>

              </div>
            </div>
            <div class="c-fr">
              <!-- 片段开始 -->
              <div class="ntes-nav-quick-navigation">
                <a href="" class="ntes-nav-quick-navigation-btn ntes-nav-quick-navigation-init"
                    target="_self">
                  <em>快速导航
                    <span class="menu1"></span>
                    <span class="menu2"></span>
                    <span class="menu3"></span>
                  </em>
                </a>

              </div>
              <div class="c-fr">
                <div class="c-fl" >
                  <!--登录-->
                  <div v-if="token==null">
                    <div  class="js_loginframe ntes-nav-login ntes-nav-login-normal">
                      <a  class=""  @click="LoginFormVisible = true">登录</a>
                    </div>
                    <div class="js_N_navSelect ntes-nav-select ntes-nav-select-wide  c-fl">
                      <a class="ntes-nav-select-title ntes-nav-select-title-register"  @click="RegisterFormVisible = true">点击注册</a>
                    </div>
                  </div>

                 <div v-else>
                   欢迎{{token}} |
                    <span @click="exit()">退出</span>
                 </div>

                </div>
                <!--登录页面-->
                <el-dialog title="登录界面" :append-to-body='true' :visible.sync="LoginFormVisible" width="30%" center>
                  <el-form :model="User" status-icon :rules="rules" ref="ruleForm" >
                    <el-form-item label="用户账号：" prop="username" :label-width="formLabelWidth">
                      <el-input style="width: 300px;" v-model="User.username" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="用户密码："prop="password" :label-width="formLabelWidth">
                      <el-input style="width: 300px" type="password" v-model="User.password" autocomplete="off"></el-input>
                    </el-form-item>
                  </el-form>
<!--                  <div style="float: right">-->
<!--                    <a href="http://localhost:8888/findPd" >忘记密码？</a>-->
<!--                  </div>-->
                  <div slot="footer" class="dialog-footer" style="margin-left: 50px">
                    <el-button style="width: 100px" @click="LoginFormVisible = false">取 消</el-button>
                    <el-button style="width: 100px" type="primary" @click="submitForm('ruleForm')">登 录</el-button>
                  </div>
                </el-dialog>
                <!--注册页面-->
                <el-dialog title="注册界面"  :append-to-body='true' :visible.sync="RegisterFormVisible" width="30%" center>
                  <el-form :model="People" status-icon :rules="rules" ref="ruleForm1" >
                    <el-form-item label="输入账号：" prop="username" :label-width="formLabelWidth">
                      <el-input style="width: 300px" v-model="People.username" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="输入号码：" prop="phone" :label-width="formLabelWidth">
                      <el-input  style="width: 300px" v-model="People.phone" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="输入密码：" prop="password" :label-width="formLabelWidth">
                      <el-input type="password" style="width: 300px" v-model="People.password" autocomplete="off"></el-input>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer" style="margin-left: 50px">
                    <el-button style="width: 100px" @click="RegisterFormVisible = false">取 消</el-button>
                    <el-button style="width: 100px" type="primary" @click="RegisterForm('ruleForm1')">注 册</el-button>
                  </div>
                </el-dialog>

              </div>
              <ul class="ntes-nav-inside">
                <li>
                  <div class="js_N_navSelect ntes-nav-select c-fl">
                    <a href="" class="ntes-nav-mobile-title ntes-nav-entry-bgblack">
                      <em class="ntes-nav-entry-mobile">移动端</em>
                    </a>
                  </div>
                </li>
                <li>
                  <div class="js_N_navSelect ntes-nav-select c-fl">
                    <a  href=""
                       class="ntes-nav-select-title ntes-nav-select-title-huatian ntes-nav-entry-bgblack">
                      <em class="ntes-nav-entry-huatian">网易公开课</em>
                      <em class="ntes-nav-select-arr"></em>
                      <span class="ntes-nav-msg">
                  <em class="ntes-nav-msg-num"></em>
                </span>
                    </a>
                  </div>
                </li>
                <li>
                  <div class="js_N_navSelect ntes-nav-select c-fl">
                    <a  href=""
                       class="ntes-nav-select-title ntes-nav-select-title-lofter ntes-nav-entry-bgblack">
                      <em class="ntes-nav-entry-lofter">网易严选</em>
                      <em class="ntes-nav-select-arr"></em>
                      <span class="ntes-nav-msg" >
                  <em class="ntes-nav-msg-num"></em>
                </span>
                    </a>
                  </div>
                </li>
                <li>
                  <div class="js_N_navSelect ntes-nav-select c-fl">
                    <a href="" class="ntes-nav-select-title ntes-nav-select-title-money ntes-nav-entry-bgblack">
                      <em class="ntes-nav-entry-money">支付</em>
                      <em class="ntes-nav-select-arr"></em>
                    </a>
                  </div>
                </li>
                <li>
                  <div class="js_N_navSelect ntes-nav-select c-fl">
                    <a href=""
                       class="ntes-nav-select-title ntes-nav-select-title-mail ntes-nav-entry-bgblack">
                      <em class="ntes-nav-entry-mail">邮箱</em>
                      <em class="ntes-nav-select-arr"></em>
                      <span class="ntes-nav-msg" >
                  <em class="ntes-nav-msg-num" ></em>
                </span>
                    </a>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Nav",
    data(){
      const checkPhone = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('手机号不能为空'));
        } else {
          const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
          console.log(reg.test(value));
          if (reg.test(value)) {
            callback();
          } else {
            return callback(new Error('请输入正确的手机号'));
          }
        }
      };
      return{
        token:localStorage.getItem("name"),
        User: {},
        People: {},
        LoginFormVisible: false,//登录页面
        RegisterFormVisible: false,//修改页面
        formLabelWidth: '100px',
        rules: {
          username: [
            {required: true, message: '请输入账号名称', trigger: 'blur'},
            {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
          ],
          phone: [
            {required: true, message: '手机号不能为空', trigger: 'blur'},
            {validator: checkPhone, trigger: 'blur'}
          ],
        }
      }
    },
    methods:{
      /*退出*/
      exit(){
        alert("退出成功！")
        localStorage.removeItem("name")
        localStorage.removeItem("id")
        location.reload()
      },
      /*token*/
      findToken(){
        this.token = localStorage.getItem("name")
      },
      /*登录*/
      submitForm(formName) {
        this.$refs[formName].validate(async  (valid) => {
          if (valid) {
            if(!this.User.username){alert('请输入账号');return false}
            if(!this.User.password){alert('请输入密码');return false}
            let _this = this
            this.$axios.post("http://localhost:8055/user/login",this.User).then(function (res) {
              //清空本次保存数据
              if(res.data!=-1){
                localStorage.setItem("name",_this.User.username)
                localStorage.setItem("id",res.data)
                _this.token = localStorage.getItem("name");
                _this.$options.methods.findToken();
                alert("登录成功！")
                _this.User = {};
                _this.LoginFormVisible =false
              }else {
                alert("账号或密码错误！");
                _this.User = {};
              }
            }).catch(function (err) {
              localStorage.removeItem('name')
              localStorage.removeItem('id')
              alert("账号或密码错误！");
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      /*注册*/
      RegisterForm(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(!this.People.username){alert('请输入用户名称');return false}
            if(!this.People.phone){alert('请输入电话号码');return false}
            if(!this.People.password){alert('请输入用户密码');return false}
            this.People.roleId = 2
            console.log(this.People)
            let _this = this
            this.$axios.post("http://localhost:8055/user/setUser",this.People).then(function () {
              //清空本次保存数据
              alert("注册成功！请重新登录！")
              _this.People = {};
              location. reload()
            }).catch(function (err) {
              // alert("用户信息添加失败，请稍后再试")
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    },
  }
</script>

<style scoped>
  .index_head {
    margin-top: 25px;
    min-width: 960px;
  }

  .index_head .hd {
    height: 48px;
    overflow: hidden;
  }

  .index_head .hd h1 {
    float: left;
  }

  .channel2019_news_logo {
    background-position: 0px 4px !important;
  }

  .channel2019_logo {
    background: url(http://cms-bucket.ws.126.net/2021/1117/aa3634c2p00r2p5bt003ec0008m028kc.png) no-repeat !important;
    width: 152px !important;
    height: 37px !important;
    display: block !important;
    float: left !important;
  }

  a {
    text-decoration: none;
  }

  a {
    color: #404040;
  }

  .index_head .bd {
    border-top: 2px #f34540 solid;
    border-bottom: 1px #eeeeee solid;
  }

  .index_head .bd .ns_area {
    overflow: hidden;
    height: 47px;
    line-height: 47px;
  }

  .index_head .bd .ns_area ul {
    width: 1280px;
  }

  .index_head .bd .ns_area li.first {
    padding-left: 0;
  }

  .index_head .bd .ns_area a {
    color: #000000;
  }

  .index_head .bd .ns_area li {
    float: left;
    font-size: 16px;
    padding: 0px 26px 0px 21px;
    background: url(http://static.ws.126.net/f2e/news/index2016/images/sprite_icon0813_v1.png) no-repeat 100% -53px;
  }

  .index_head .bd .ns_area li {
    float: left;
    font-size: 16px;
    padding: 0px 26px 0px 21px;
    background: url(http://static.ws.126.net/f2e/news/index2016/images/sprite_icon0813_v1.png) no-repeat 100% -53px;
  }

  .index_head .hd h1 a {
    line-height: 1000px;
    overflow: hidden;
    background: url(https://static.ws.126.net/163/f2e/news/index2016_rmd/images/sprite_img20190530.png) no-repeat;
  }

  .N-nav-channel {
    width: 1200px;
    background: #ffffff;
  }

  .N-nav-channel {
    padding: 14px 0;
    line-height: 13px;
  }

  .N-nav-channel, .ntes-nav {
    font-family: "\5B8B\4F53", sans-serif;
    font-size: 12px;
  }

  .N-nav-channel {
    text-align: center;
    width: 960px;
    margin: 0 auto;
  }

  .N-nav-channel a.first {
    border-left: 0;
    padding-left: 0;
    padding-right: 12px;
  }

  .N-nav-channel a:link, .N-nav-channel a:visited {
    color: #252525;
  }

  .N-nav-channel a {
    padding: 0px 12px;
  }

  .index_top_ad {
    min-height: 100px;
    line-height: 0;
  }

  .ns_area {
    width: 1200px;
    margin: 0px auto;
  }

  .channel_relative_2016 {
    position: relative;
    line-height: 0px;
  }

  .channel_relative_2016 .channel_ad_2016, .channel_relative_2016 .channel_ad_text_2016 {
    display: inline-block;
  }

  .channel_ad_2016 {
    height: 17px;
    display: none;
    background: rgba(0, 0, 0, 0.6);
    background: #000 \9;
    color: #fff;
    border-radius: 0 8px 0px 0px;
    line-height: 17px;
    width: 30px;
    text-align: left;
    overflow: hidden;
    font-size: 12px;
    font-family: Arial;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
  }

  iframe {
    border-width: 2px;
    border-style: inset;
    border-color: initial;
    border-image: initial;
  }
</style>
